<template>
<ul class="message-detail">
    <li>
      <div class="msg-title">内容描述</div>
      <div class="content msg-border">
        {{_.get(messageDetailInfo,'content')}}
      </div>
    </li>
    <li>
      <div class="msg-title">图片</div>
      <div class="img-box msg-border">
        <div class="img-list" v-for="item in _.get(messageDetailInfo,'pic')||[]">
          <img @click="lookImg(item)"  :src="item" />
        </div>
      </div>
    </li>
    <li>
      <div class="msg-title">上报人员</div>
      <div class="content msg-border">
        {{_.get(messageDetailInfo,'userName')}}
      </div>
    </li>
  <Modal  footer-hide  width="980"
         v-model="modal1"
         title="查看图片">
    <div class="box-big-img"><img :src="src"></div>
  </Modal>
</ul>
</template>

<script>
import {messageFault} from '@/api/message';
export default {
  name: "messageDetail",

  data(){
    return {
      id:'',
      modal1:false,
      messageDetailInfo:{},
      src:'',
    }
  },
  mounted() {
    this.id=this.$route.query.id;
    this.getMessageFault();
  },
  methods:{
    lookImg(src){
      this.src=src;
      this.modal1=true;
    },
   async getMessageFault(){
      let res = await  messageFault({
        id:this.id
      })
      this.messageDetailInfo=_.get(res,'data')||{};
    }
  },
}
</script>

<style scoped lang="less">
.message-detail{
  color: #fff;
  li{
    margin-top: 20px;
  }
}
.msg-border{
  padding:10px;
  border: 1px solid #334B88;
  margin-top: 10px;
  margin-left:10px;
  min-height:120px;
  max-height:300px;
  overflow:auto;
}
.img-list{
  width:120px;
  height:120px;
  padding:10px;
  img{
    //max-height:calc(~"100% - 20px");
    //max-width:calc(~"100% - 20px");
    min-width: 100%;
    height: 100%;
  }

}
.box-big-img{
  max-height: 600px;
  overflow:auto;
  img{
    width:100%;
  }
}
</style>
